<script setup>
import { CameraEventType, createOsmBuildingsAsync, Ion, Viewer } from 'cesium'

onMounted(() => {
  init()
})

async function init() {
  Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlOWNlZmEwNC1jZjhhLTQzZjgtYTIzNy1jZTk3YmZjNDdiZjkiLCJpZCI6MjIzMzc1LCJpYXQiOjE3MTg4NjMxNTl9.dv4bPDW7BTQc6R2_5NWJjruyzTXlrqJZJbWrcjidWKs'

  const viewer = new Viewer('cesiumContainer', {
    animation: false,
    baseLayerPicker: false,
    fullscreenButton: false,
    geocoder: false,
    homeButton: false,
    navigationHelpButton: false,
    sceneModePicker: false,
    timeline: false,
  })

  const buildingTiles = await createOsmBuildingsAsync()
  viewer.scene.primitives.add(buildingTiles)

  // 将原来鼠标中键倾斜视图修改为鼠标右键触发
  viewer.scene.screenSpaceCameraController.tiltEventTypes = [CameraEventType.RIGHT_DRAG]
  // 将原来鼠标右键放大缩放修改为鼠标滚轮滚动
  viewer.scene.screenSpaceCameraController.zoomEventTypes = [CameraEventType.WHEEL]
}
</script>

<template>
  <div id="cesiumContainer" />
</template>
